﻿layui.define(function (exports) {
    "use strict";
    var dark = {
        init: function () {
            function _classCallCheck(instance, Constructor) {
                if (!(instance instanceof Constructor)) {
                    throw new TypeError("Cannot call a class as a function");
                }
            }
            function _defineProperties(target, props) {
                for (var i = 0; i < props.length; i++) {
                    var descriptor = props[i];
                    descriptor.enumerable = descriptor.enumerable || false;
                    descriptor.configurable = true;
                    if ("value" in descriptor) descriptor.writable = true;
                    Object.defineProperty(target, descriptor.key, descriptor);
                }
            }
            function _createClass(Constructor, protoProps, staticProps) {
                if (protoProps)
                    _defineProperties(Constructor.prototype, protoProps);
                if (staticProps)
                    _defineProperties(Constructor, staticProps);
                return Constructor;
            }
            var IS_BROWSER = typeof window !== 'undefined';
            var Dark =
                function () {
                    function Dark(options) {
                        _classCallCheck(this, Dark);
                        if (!IS_BROWSER) {
                            return;
                        }
                        var defaultOptions = {
                            top: '3px',
                            right: '32px',
                            left: 'unset',
                            time: '0.7s',
                            mixColor: '#fff',
                            backgroundColor: '#fff',
                            buttonColorDark: '#fff',
                            buttonColorLight: '#fff',
                            // 🌗
                            label: '🌚',
                            saveInCookies: true,
                            autoMatchOsTheme: true
                        };
                        options = Object.assign({}, defaultOptions, options);
                        var css = "\n      .dark-layer {\n z-index: 999999999999;\n position: fixed;\n        pointer-events: none;\n        background: ".concat(options.mixColor, ";\n        transition: all ").concat(options.time, " ease;\n        mix-blend-mode: difference;\n      }\n\n      .dark-layer--button {\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n        right: ").concat(options.right, ";\n        top: ").concat(options.top, ";\n        left: ").concat(options.left, ";\n      }\n\n      .dark-layer--simple{\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        transform: scale(1) !important;\n      }\n\n      .dark-layer--expanded {\n        transform: scale(100);\n        border-radius: 0;\n      }\n\n      .dark-layer--no-transition {\n        transition: none;\n      }\n\n      .dark-toggle {\n z-index: 999999999999;\n color:#fff;\nbackground: ").concat(options.buttonColorDark, ";\n        width: 30px;\n        height: 30px;\n        position: fixed;\n        border-radius: 50%;\n        border:1px solid #4b5cc4;\n        right: ").concat(options.right, ";\n        top: ").concat(options.top, ";\n        left: ").concat(options.left, ";\n        cursor: pointer;\n        transition: all 0.5s ease;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .dark-toggle--white {\n        background: ").concat(options.buttonColorLight, ";\n      }\n\n      .dark-toggle--inactive {\n        display: none;\n      }\n\n      .dark-background {\n        background: ").concat(options.backgroundColor, ";\n        position: fixed;\n        pointer-events: none;\n        z-index: -10;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n\n      img, .dark-ignore {\n        isolation: isolate;\n        display: inline-block;\n      }\n\n      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n        .dark-toggle {display: none !important}\n      }\n\n      @supports (-ms-ime-align:auto), (-ms-accelerator:true) {\n        .dark-toggle {display: none !important}\n      }\n    ");
                        var layer = document.createElement('div');
                        var button = document.createElement('button');
                        var background = document.createElement('div');
                        button.innerHTML = options.label;
                        button.classList.add('dark-toggle--inactive');
                        layer.classList.add('dark-layer');
                        background.classList.add('dark-background');
                        var darkmodeActivated = window.localStorage.getItem('dark') === 'true';
                        var preferedThemeOs = options.autoMatchOsTheme && window.matchMedia('(prefers-color-scheme: dark)').matches;
                        var darkmodeNeverActivatedByAction = window.localStorage.getItem('dark') === null;
                        if (darkmodeActivated === true && options.saveInCookies || darkmodeNeverActivatedByAction && preferedThemeOs) {
                            layer.classList.add('dark-layer--expanded', 'dark-layer--simple', 'dark-layer--no-transition');
                            button.classList.add('dark-toggle--white');
                            document.body.classList.add('dark--activated');
                        }
                        document.body.insertBefore(button, document.body.firstChild);
                        document.body.insertBefore(layer, document.body.firstChild);
                        document.body.insertBefore(background, document.body.firstChild);
                        this.addStyle(css);
                        this.button = button;
                        this.layer = layer;
                        this.saveInCookies = options.saveInCookies;
                        this.time = options.time;
                    }
                    _createClass(Dark, [{
                        key: "addStyle",
                        value: function addStyle(css) {
                            var linkElement = document.createElement('link');
                            linkElement.setAttribute('rel', 'stylesheet');
                            linkElement.setAttribute('type', 'text/css');
                            linkElement.setAttribute('href', 'data:text/css;charset=UTF-8,' + encodeURIComponent(css));
                            document.head.appendChild(linkElement);
                        }
                    }, {
                        key: "showWidget",
                        value: function showWidget() {
                            var _this = this;
                            if (!IS_BROWSER) {
                                return;
                            }
                            var button = this.button;
                            var layer = this.layer;
                            var time = parseFloat(this.time) * 1000;
                            button.classList.add('dark-toggle');
                            button.classList.remove('dark-toggle--inactive');
                            button.setAttribute("aria-label", "Activate dark mode");
                            button.setAttribute("aria-checked", "false");
                            button.setAttribute("role", "checkbox");
                            layer.classList.add('dark-layer--button');
                            button.addEventListener('click', function () {
                                var isDarkmode = _this.isActivated();
                                console.log(isDarkmode);
                                if (!isDarkmode) {
                                    layer.classList.add('dark-layer--expanded');
                                    layui.$(".dark-toggle").text('🌕');
                                    button.setAttribute('disabled', true);
                                    setTimeout(function () {
                                        layer.classList.add('dark-layer--no-transition');
                                        layer.classList.add('dark-layer--simple');
                                        button.removeAttribute('disabled');
                                    }, time);
                                } else {
                                    layer.classList.remove('dark-layer--simple');
                                    layui.$(".dark-toggle").text('🌚');
                                    button.setAttribute('disabled', true);
                                    setTimeout(function () {
                                        layer.classList.remove('dark-layer--no-transition');
                                        layer.classList.remove('dark-layer--expanded');
                                        button.removeAttribute('disabled');
                                    }, 1);
                                }
                                button.classList.toggle('dark-toggle--white');
                                document.body.classList.toggle('dark--activated');
                                window.localStorage.setItem('dark', !isDarkmode);
                            });
                        }
                    }, {
                        key: "toggle",
                        value: function toggle() {
                            if (!IS_BROWSER) {
                                return;
                            }
                            var layer = this.layer;
                            var isDarkmode = this.isActivated();
                            var button = this.button;
                            layer.classList.toggle('dark-layer--simple');
                            document.body.classList.toggle('dark--activated');
                            window.localStorage.setItem('dark', !isDarkmode);
                            button.setAttribute("aria-label", "De-activate dark mode");
                            button.setAttribute("aria-checked", "true");
                        }
                    }, {
                        key: "isActivated",
                        value: function isActivated() {
                            if (!IS_BROWSER) {
                                return null;
                            }
                            return document.body.classList.contains('dark--activated');
                        }
                    }]);
                    return Dark;
                }();
            return Dark;
        },
        load: function () {
            var Dark = this.init();
            window.addEventListener('load', new Dark({top:'12px', right: '112px' }).showWidget());
        }
    };
    exports('dark', dark);
});